<template>
  <el-row :gutter="20" class="middle">
    <div class="left">
      <div v-for="(item, index) in classname" :key="index" class="text item">
        {{item.title}}
        <el-icon style="margin-bottom: -15px"><ArrowRightBold /></el-icon>
<!--        <el-divider style="margin-bottom: -15px">-->
<!--            <el-icon><star-filled /></el-icon>-->
<!--        </el-divider>-->
      </div>
    </div>
    <div class="imgchange">
      <el-carousel height="360px" style="border-radius: 20px">
        <el-carousel-item v-for="item in myimg" :key="item">
          <img :src="item.url" alt="" style="width:100%;height: auto;"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="right">
      <div style="margin-bottom: 50px;text-align: center;margin-top: 15px">
        <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            :size="'large'"
            style="margin-bottom: 10px"
        />
        <p style="font-size: larger">欢迎您使用本系统！</p>
      </div>
      <img src="../assets/test.png" alt="" style="width: 100%;">
    </div>
  </el-row>
</template>

<script lang="ts" setup>
import { ArrowRightBold} from '@element-plus/icons-vue'
const myimg=[
  {url: require("@/assets/img/1.png")},
  {url: require("@/assets/img/2.jpg")},
  {url: require("@/assets/img/3.png")},
  {url: require("@/assets/img/4.jpg")},
]
const classname=[
  {title:'程序设计语言'},
  {title:'算法设计'},
  {title:'计算机基础'},
  {title:'计算机系统能力'},
  {title:'云计算与大数据'},
  {title:'数据库'},
  {title:'人工智能'},
  {title:'更多'},
]
</script>

<style scoped>
.middle{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-bottom: 12px;
  position: relative;
  margin-top: 20px;
}
.middle .left{
  background-color: white;
  border-radius: 20px;
  margin-left: 20px;
  width: 200px;
  line-height: 0;
  height: 360px;
  padding-left: 20px;
}
.imgchange{
  width: 60%;
  border-radius: 20px;
  position: center;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.inter{
  margin-top: 20px;
  width: 175px;
  position: center;
  display: flex;
  align-items: center;
  margin-left: 0
}
.right{
  background-color: white;
  border-radius: 20px;
  margin-right: 20px;
  width: 200px;
  padding-left: 20px;
  line-height: 0;
}

</style>
